<template>
  <div class="view-fill">
    <div v-if="!detailsInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="供应商产品"
        :need-return="false"
        :btn-list="fullInfo.btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body" style="padding: 10px 0px 13px 0px">
            <basic-information
              :info="infoList"
              :rules="infoList.rules"
              v-model:ref-obj="infoList.ref"
            >
              <template v-slot:basic-contact>
                <el-input
                  v-model="infoList.data.contact"
                  type="text"
                  placeholder="联系人"
                  @input="(e) => (infoList.data.contact = validSe(e))"
                />
              </template>
              <template v-slot:basic-contactNumber>
                <el-input
                  v-model="infoList.data.contactNumber"
                  type="text"
                  placeholder="联系电话"
                  @input="(e) => (infoList.data.contactNumber = validSe(e))"
                />
              </template>
              <template v-slot:basic-serviceScope>
                <el-select
                  v-model="infoList.data.serviceScope"
                  placeholder="服务范围"
                  disabled
                  collapse-tags
                  style="width: 300px"
                >
                  <el-option
                    v-for="(item, index) in serviceScopeList"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </template>
              <template v-slot:basic-expectDeliveryDay>
                <el-input
                  v-model="infoList.data.expectDeliveryDay"
                  type="number"
                  maxlength="6"
                  placeholder="预期到货天数"
                  @input="(e) => (infoList.data.expectDeliveryDay = validSe(e))"
                />
              </template>
            </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('product_list') }}</p>
          </div>
          <div class="model-panel-body">
            <!-- 条件栏 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="关联产品列表" name="product">
                <page-filter
                  v-model:query="filterInfo.query"
                  :filter-list="filterInfo.list"
                >
                  <template v-slot:filter-removeProduct>
                    <el-button
                      :disabled="!canRemoveProduct"
                      @click="removeProduct()"
                      >删除产品</el-button
                    >
                  </template>
                </page-filter>
                <el-form ref="tableForm" :model="tableInfo" style="width: 100%">
                  <page-table
                    v-if="activeName === 'product'"
                    :refresh="tableInfo.refresh"
                    :init-curpage="tableInfo.initCurpage"
                    v-model:data="tableInfo.data"
                    :api="getSupplierProductPage"
                    :pager="true"
                    :query="filterInfo.query"
                    :field-list="tableInfo.fieldList"
                    :handle="tableInfo.handle"
                    :isDynamic="false"
                    @handleEvent="handleEvent"
                  >
                    <template v-slot:col-licenseNumber="scope">
                      <p>{{ scope.row.licenseNumber || '-' }}</p>
                      <p>{{ scope.row.brandName || '-' }}</p>
                    </template>
                    <template v-slot:col-commonName="scope">
                      <p class="slip-edit" @click="showDitails(scope.row)">
                        {{ scope.row.commonName || '-' }}
                      </p>

                      <p>{{ scope.row.productCode || '-' }}</p>
                      <p>{{ scope.row.alias || '-' }}</p>
                    </template>
                    <template v-slot:col-type="scope">
                      <p>{{ scope.row.productTypeValue || '-' }}</p>
                      <p>{{ scope.row.codeTypeValue || '-' }}</p>
                      <p>{{ scope.row.productCategoryValue || '-' }}</p>
                    </template>
                    <template v-slot:col-standard="scope">
                      <p>{{ scope.row.standard || '-' }}</p>
                      <p>{{ scope.row.unitName || '-' }}</p>
                    </template>
                    <template v-slot:col-price="scope">
                      <el-form-item
                        v-if="scope.row.edit"
                        :prop="`data.${scope.$index}[price]`"
                        :rules="
                          scope.$index >= 0
                            ? [
                                {
                                  validator: $validate.positive,
                                  trigger: 'blur',
                                },
                              ]
                            : []
                        "
                      >
                        <el-input
                          v-model.number.trim="scope.row.price"
                          type="number"
                          style="width: 100px"
                          :precision="2"
                          :min="0"
                          :max="99999999"
                        />
                      </el-form-item>
                      <p v-else>{{ $fn.TripartiteMethod(scope.row.price) }}</p>
                    </template>
                  </page-table>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="关联厂家列表" name="brandName">
                <page-filter
                  v-model:query="brandFilterInfo.query"
                  :filter-list="brandFilterInfo.list"
                >
                </page-filter>
                <page-table
                  v-if="activeName === 'brandName'"
                  :refresh="brandTableInfo.refresh"
                  :init-curpage="brandTableInfo.initCurpage"
                  v-model:data="brandTableInfo.data"
                  :check-box="false"
                  :tab-index="true"
                  :api="brandTableInfo.api"
                  :query="brandFilterInfo.query"
                  :field-list="brandTableInfo.fieldList"
                  :isDynamic="true"
                >
                  <template v-slot:col-name="scope">
                    <p class="slip-edit" @click="showDetail(scope.row)">
                      {{ scope.row.name || '-' }}
                    </p>
                  </template>
                </page-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>资产信息</p>
          </div>
          <div class="model-panel-body">
            <page-filter
              v-model:query="filterEquipmentInfo.query"
              :filter-list="filterEquipmentInfo.list"
            >
              <template v-slot:filter-removeEquipment>
                <el-button
                  :disabled="!canRemoveEquipment"
                  @click="removeEquipment()"
                  >删除资产</el-button
                >
              </template>
            </page-filter>
            <el-form
              ref="tableEquipmentForm"
              :model="tableEquipmentInfo"
              style="width: 100%"
            >
              <page-table
                :refresh="tableEquipmentInfo.refresh"
                :init-curpage="tableEquipmentInfo.initCurpage"
                v-model:data="tableEquipmentInfo.data"
                :api="tableEquipmentInfo.api"
                :query="filterEquipmentInfo.query"
                :field-list="tableEquipmentInfo.fieldList"
                :handle="tableEquipmentInfo.handle"
                @handleEvent="handleEventEquipment"
              >
                <template v-slot:col-commonName="scope">
                  <p>{{ scope.row.commonName || '-' }}</p>
                  <p>{{ scope.row.productCode || '-' }}</p>
                </template>
                <template v-slot:col-unitName="scope">
                  <p>{{ scope.row.unitName || '-' }}</p>
                  <p>{{ scope.row.standard || '-' }}</p>
                </template>
                <template v-slot:col-brandName="scope">
                  <p>{{ scope.row.trademark || '-' }}</p>
                  <p>{{ scope.row.brandName || '-' }}</p>
                </template>
                <template v-slot:col-deviceTypeValue="scope">
                  <p>{{ scope.row.deviceTypeValue || '-' }}</p>
                  <p>{{ scope.row.financeTypeValue || '-' }}</p>
                </template>
                <template v-slot:col-price="scope">
                  <el-form-item
                    v-if="scope.row.edit"
                    :prop="`data.${scope.$index}[price]`"
                    :rules="
                      scope.$index >= 0
                        ? [
                            {
                              validator: $validate.positive,
                              trigger: 'blur',
                            },
                          ]
                        : []
                    "
                  >
                    <el-input
                      v-model.number.trim="scope.row.price"
                      type="number"
                      style="width: 100px"
                      :precision="2"
                      :min="0"
                      :max="99999999"
                    />
                  </el-form-item>
                  <p v-else>{{ $fn.TripartiteMethod(scope.row.price) }}</p>
                </template>
              </page-table>
            </el-form>
          </div>
        </div>
        <!-- <SelectEquipmentArchives
          v-if="equipmentInfo.visible"
          v-model:show-dialog="equipmentInfo.visible"
          :query-params="equipmentInfo.queryParams"
          @callback="changeEquipment"
        /> -->
        <!-- 产品弹窗 -->
        <select-product-add-price
          v-if="productInfo.visible"
          :query="productInfo.query"
          v-model:show-dialog="productInfo.visible"
          @callback="selectProduct"
        />
        <!-- 资产弹窗 -->
        <select-equipment-add-price
          v-if="equipmentInfo.visible"
          :query="equipmentInfo.query"
          v-model:show-dialog="equipmentInfo.visible"
          @callback="changeEquipment"
        />
        <!-- 产品供应商弹窗 -->
        <SelectProductBySupplier
          v-if="productBySupplier.visible"
          :query="productBySupplier.query"
          :supplierName="infoList.data.supplierName"
          :supplierId="infoList.data.supplierId"
          v-model:show-dialog="productBySupplier.visible"
          @callback="selectProductBySupplier"
        />
      </NewFullScreen>
    </div>
    <Details
      v-if="detailsInfo.visible"
      :id="detailsInfo.id"
      v-model:visible="detailsInfo.visible"
      @returnBack="brandGetList"
    ></Details>
  </div>
</template>

<script setup name="supplierProduct">
import Details from '@/views/base/brand/details'
import {
  getMaintenanceProductPage,
  batchCreateMaintenanceProduct,
  deleteMaintenanceProduct,
  getSupplierProductPage,
  batchCreateSupplierProduct,
  switchSupplierProduct,
  deleteSupplierProduct,
  getCoreDeviceSelectPage,
  updateSupplier,
  exportSupplierProductNew,
  exportMaintenanceProductNew,
  getSupplierBrandPage,
} from '@/api/core.js'
const SelectProductBySupplier = defineAsyncComponent(() =>
  import('./selectProductBySupplier')
)
import { ElLoading } from 'element-plus'

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps(['visible', 'tableRow'])

const baseUrl = ref(import.meta.env.VITE_APP_BASE_API)

const uploadInfo = ref({
  action: baseUrl.value + '/core/supplierProducts/import/excel',
  deviceAction: baseUrl.value + '/mapping/mappingSupplierDevice/import/excel',
  headers: {
    Authorization: proxy.$store.state.user.token,
  },
  loading: {},
  data: {
    supplierId: props.tableRow.supplierId,
  },
})
const infoList = ref({
  ref: null,
  data: props.tableRow,
  fieldList: [
    { label: '供应商名称', value: 'supplierName', type: 'text' },
    { label: '联系人', value: 'contact', type: 'slot' },
    { label: '联系电话', value: 'contactNumber', type: 'slot' },
    { label: '服务范围', value: 'serviceScope', type: 'slot' },
    { label: '预期到货天数', value: 'expectDeliveryDay', type: 'slot' },
    { label: '状态', value: 'orgStatusValue' },
  ],
  rules: {
    contactNumber: [{ validator: proxy.$validate.cellphone, trigger: 'blur' }],
    serviceScope: [
      // { required: true, message: '请选择服务范围', trigger: 'change' },
    ],
  },
})
console.log(props.tableRow)
// 过滤相关配置
const filterInfo = ref({
  query: {
    type: 0,
    searchType: 'product',
    searchField: 'productId',
    showDisabled: true,
    supplierId: props.tableRow.supplierId,
    sort: 'create_time desc',
  },
  list: [
    {
      type: 'button',
      label: '添加产品',
      event: addProduct,
      disabled: props.tableRow.orgStatus === 0,
    },
    { type: 'slot', value: 'removeProduct' },
    {
      type: 'button',
      label: '导出产品',
      event: exportExcel,
      disabled: false,
    },
    {
      type: 'button',
      label: '变更供应商',
      event: addProductBySupplier,
      disabled: false,
    },
    // { type: "slot", value: "uploadProduct" },
    {
      type: 'input',
      label: '名称/别名/编码/助记符',
      value: 'keyword',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '证号\n生产厂家', value: 'licenseNumber', type: 'slot' },
    { label: '通用名称\n编码\n别名', value: 'commonName', type: 'slot' },
    {
      label: '产品类型\n条码类型\n产品分类',
      value: 'type',
      type: 'slot',
    },
    { label: '规格\n计量单位', value: 'standard', type: 'slot' },
    { label: '价格', value: 'price', type: 'slot' },
    {
      label: '省采价格',
      value: 'provincePrice',
      formatter: proxy.$fn.TripartiteMethod,
      hidden:
        proxy.$store.state.permission.systemConfig.connect_purchase_platform ==
        1
          ? false
          : true,
    },
    // {label: '状态', value: 'statusValue'}
  ],
})
const brandTableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: getSupplierBrandPage,
  fieldList: [
    {
      label: '名称',
      value: 'name',
      width: '250',
      type: 'slot',
    },
    {
      label: '编码',
      value: 'code',
    },
    {
      label: '营业执照(过期日期)',
      value: 'businessLicense',
    },
    {
      label: '医疗器械生产许可(过期日期)',
      value: 'medicalDeviceLicense',
    },
    {
      label: '医疗器械生产备案(过期日期)',
      value: 'firstMedicalDeviceFiling',
    },
    {
      label: '卫生许可证(过期日期)',
      value: 'sanitaryLicense',
    },
  ],
})
const brandFilterInfo = ref({
  query: {
    supplierId: props.tableRow.supplierId,
    sort: 'create_time desc',
  },
  list: [
    {
      type: 'input',
      label: '名称/编码',
      value: 'keyword',
      event: brandSearch,
    },
    { type: 'button', label: '搜索', event: brandSearch },
  ],
})
const fullInfo = ref({
  btnList: [
    { label: '保存', event: saveInformation, show: true },
    { label: '返回', event: returnBack, show: true },
  ],
})
//产品弹窗相关
const productInfo = ref({
  query: {},
  visible: false,
})
const productBySupplier = ref({
  query: {},
  visible: false,
})
const filterEquipmentInfo = ref({
  query: {
    type: 1,
    searchType: 'product',
    searchField: 'productId',
    showDisabled: true,
    supplierId: props.tableRow.supplierId,
    sort: 'create_time desc',
  },
  list: [
    { type: 'button', label: '添加资产', event: addEquipment },
    { type: 'slot', value: 'removeEquipment' },
    {
      type: 'button',
      label: '导出资产',
      event: exportEquipmentExcel,
      disabled: false,
    },
    {
      type: 'input',
      label: '名称/编码',
      value: 'keyword',
      event: searchDevice,
    },
    { type: 'button', label: '搜索', event: searchDevice },
  ],
})
const tableEquipmentInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: getSupplierProductPage,
  selections: [],
  fieldList: [
    { label: '资产名称\n编码', value: 'commonName', type: 'slot' },
    { label: '计量单位\n产品规格', value: 'unitName', type: 'slot' },
    { label: '医疗器械分类目录\n财务类别', value: 'deviceTypeValue', type: 'slot' },
    { label: '品牌\n生产厂家', value: 'brandName', type: 'slot' },
    { label: '价格', value: 'price', type: 'slot' },
    /* { label: '资产图片', value: 'picture', type: 'showImage' }, */
  ],
})
const equipmentInfo = ref({
  visible: false,
  query: {},
  queryParams: {
    maintenanceId: props.tableRow.supplierId,
  },
})
const detailsInfo = ref({
  visible: false,
  id: '',
})
const activeName = ref('product')
const showEquipment = ref(undefined)

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})
const serviceScopeList = computed(() => {
  return proxy.$store.state.permission.dict['service_scope'] || []
})
const canRemoveProduct = computed(() => {
  return tableInfo.value.selections.length
})
const canRemoveEquipment = computed(() => {
  return tableEquipmentInfo.value.selections.length
})

watch(
  () => tableInfo.value.data,
  (val) => {
    if (!val.length) {
      filterInfo.value.list[2].disabled = true
    } else {
      filterInfo.value.list[2].disabled = false
    }
  }
)

onMounted(() => {
  proxy.$nextTick(() => {
    if (props.tableRow.serviceScope) {
      infoList.value.data.serviceScope =
        props.tableRow.serviceScope == -2
          ? ''
          : props.tableRow.serviceScope + ''
    }
    getList()
    getEquipmentList()
  })
})

function handleClick(tab) {
  const name = tab.paneName
  if (name === 'product') {
    getList()
  } else if (name === 'brandName') {
    brandGetList()
  }
}
function returnBack() {
  showDialog.value = false
  emits('returnBack')
}
function showDetail(row) {
  detailsInfo.value.id = row.id
  detailsInfo.value.visible = true
}
// 获取列表
function getList() {
  setTimeout(() => {
    tableInfo.value.refresh = Math.random()
  }, 0)
}
function brandGetList() {
  setTimeout(() => {
    brandTableInfo.value.refresh = Math.random()
  }, 0)
}
function getEquipmentList() {
  tableEquipmentInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function brandSearch() {
  // 重置分页
  brandTableInfo.value.initCurpage = Math.random()
  brandTableInfo.value.refresh = Math.random()
}
// 搜索资产
function searchDevice() {
  tableEquipmentInfo.value.refresh = Math.random()
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
function handleEventEquipment(event, data) {
  switch (event) {
    case 'tableCheck':
      tableEquipmentInfo.value.selections = [...data]
      break
  }
}
function saveInformation() {
  //修改基础信息
  let data = Object.assign({}, props.tableRow)
  data.contactNumber = infoList.value.data.contactNumber
  data.contact = infoList.value.data.contact
  data.serviceScope = infoList.value.data.serviceScope
  data.serviceScopeValue = ''
  let arr = []
  serviceScopeList.value.map((item, index) => {
    if (infoList.value.data.serviceScope == item.code) {
      arr.push(item.name)
    }
  })
  data.serviceScopeValue = arr.join(',')
  infoList.value.ref.validate((valid) => {
    if (valid) {
      updateSupplier(data).then((resp) => {
        if (resp && resp.success) {
          showDialog.value = false
          emits('callback', null)
        }
      })
    }
  })
}
//添加产品按钮
function addProduct() {
  const idNotIn = tableInfo.value.data.map(function (item) {
    return item.productId
  })
  productInfo.value.query.idNotIn = idNotIn.toString()
  productInfo.value.query.supplierId = infoList.value.data.supplierId
  productInfo.value.visible = true
}
//选择产品回调
function selectProduct(data = []) {
  let arr = data.map(function (item) {
    return {
      ...item,
      productId: item.id,
      edit: false,
    }
  })
  save(arr)
}
function addProductBySupplier() {
  productBySupplier.value.visible = true
}
// 供应商产品回调
function selectProductBySupplier(data = []) {
  let arr = data.map(function (item) {
    return {
      supplierId: infoList.value.data.supplierId,
      productId: item.productId,
      isDefault: item.isDefault,
      price: item.price,
      status: 'confirmed',
    }
  })
  proxy.$refs['tableForm'].validate((valid) => {
    if (valid) {
      switchSupplierProduct(arr).then((resp) => {
        if (resp && resp.success) {
          tableInfo.value.refresh = Math.random()
        }
      })
    }
  })
}
function save(data) {
  proxy.$refs['tableForm'].validate((valid) => {
    console.log(valid)
    if (valid) {
      const _tableInfo = tableInfo.value
      const supplierId = infoList.value.data.supplierId
      data = data.map(function (item) {
        return {
          productId: item.productId,
          supplierId: supplierId,
          status: 'confirmed',
          price: item.price,
          isLimitPrice: item.isLimitPrice,
          purchaseLimitPrice: item.purchaseLimitPrice,
        }
      })

      if (!data || !data.length) {
        return
      }

      batchCreateSupplierProduct(data).then((resp) => {
        if (resp && resp.success) {
          _tableInfo.refresh = Math.random()
        }
      })
    }
  })
}
//删除产品
function removeProduct() {
  const ids = tableInfo.value.selections.map((value) => value.id)
  if (ids.length) {
    proxy.$handleAPI('delete', deleteSupplierProduct, ids).then((resp) => {
      if (resp && resp.success) {
        getList()
      }
    })
  } else {
    proxy.$message({
      type: 'warning',
      message: '请选择产品！',
      duration: 3500,
      showClose: true,
    })
  }
}
function beforeProductUpload(file) {
  //发生请求时打开加载动画
  uploadInfo.value.loading = ElLoading.service({
    fullscreen: true,
    background: 'rgba(255,255,255,.4)',
  })
  return true
}
function importProduct(resp) {
  uploadInfo.value.loading.close()
  if (resp && resp.success) {
    proxy.$message.success({
      duration: 3000,
      showClose: true,
      message: resp.msg,
    })
    getList()
  } else {
    proxy.$message.error({
      message: resp.msg,
      duration: 3000,
      showClose: true,
    })
  }
}
function importDevice(resp) {
  uploadInfo.value.loading.close()
  if (resp && resp.success) {
    proxy.$message.success({
      duration: 3000,
      showClose: true,
      message: resp.msg.replace(/[\n]/g, '\\n'),
    })
    getEquipmentList()
  } else {
    proxy.$message.error({
      message: resp.msg,
      duration: 3000,
      showClose: true,
    })
  }
}
function uploadError(err) {
  if (err) {
    proxy.$message.error({
      message: '系统错误',
      duration: 3000,
      showClose: true,
    })
  }
  uploadInfo.value.loading.close()
}
function addEquipment() {
  const idNotIn = tableEquipmentInfo.value.data.map(function (item) {
    return item.productId
  })
  equipmentInfo.value.query.idNotIn = idNotIn.toString()
  equipmentInfo.value.query.supplierId = infoList.value.data.supplierId
  equipmentInfo.value.visible = true
}
function changeEquipment(data = []) {
  let arr = data.map(function (item) {
    return {
      ...item,
      productId: item.id,
      edit: false,
    }
  })
  saveEquipment(arr)
}
function saveEquipment(data) {
  proxy.$refs['tableEquipmentForm'].validate((valid) => {
    console.log(valid)
    if (valid) {
      const _tableInfo = tableEquipmentInfo.value
      const supplierId = infoList.value.data.supplierId
      data = data.map(function (item) {
        return {
          productId: item.productId,
          supplierId: supplierId,
          status: 'confirmed',
          price: item.price,
          isLimitPrice: item.isLimitPrice,
          purchaseLimitPrice: item.purchaseLimitPrice,
        }
      })

      if (!data || !data.length) {
        return
      }

      batchCreateSupplierProduct(data).then((resp) => {
        if (resp && resp.success) {
          _tableInfo.refresh = Math.random()
        }
      })
    }
  })
}
function removeEquipment() {
  if (tableEquipmentInfo.value.selections.length) {
    let ids = []
    ids = tableEquipmentInfo.value.selections.map((item) => item.id)
    proxy.$handleAPI('delete', deleteSupplierProduct, ids).then((resp) => {
      if (resp && resp.success) {
        getEquipmentList()
      }
    })
    /*  deleteMaintenanceProduct(arr).then((res) => {
      if (res) {
        getEquipmentList()
      }
    }) */
  } else {
    proxy.$message({
      type: 'warning',
      message: '请选择资产！',
      duration: 3500,
      showClose: true,
    })
  }
}
function exportExcel() {
  exportSupplierProductNew(props.tableRow.supplierId).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function exportEquipmentExcel() {
  exportMaintenanceProductNew(props.tableRow.supplierId).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function showDitails(row) {
  let url = '/product/product'
  let name = ''
  let routes = proxy.$store.state.permission.routes
  routes.map((item) => {
    if (item.children && item.children.length) {
      item.children.map((i) => {
        if (i.url === url) {
          name = url
        }
      })
    }
  })

  if (name) {
    let data = {
      url: url,
      type: 2,
      urlType: 2,
      businessId: row.productId,
    }
    proxy.$router.push(url)
    proxy.$store.dispatch('settings/toPage', data)
  } else {
    proxy.$message({
      duration: 3500,
      type: 'warning',
      showClose: true,
      message: '你没有相应的菜单权限',
    })
  }
}
</script>

<style scoped>
.model-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
